<template>
	<view class="page">
		<view class="" style="display: flex;align-items: center;height: 100vh;width: 100%;justify-content: center;">
			<view class="u-text-center">
				<view class="header">
					<image src="@/static/logo.png"></image>
				</view>
				<button class="bottom" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<image class="" src="../../static/weixin.png" mode="aspectFit">
					</image>
					微信授权登录

				</button>
				<button class="bottom_gray u-m-t-30" @click="$u.route({type:'navigateBack',delta:'1'})">

					暂不登录

				</button>
				<view style="text-align: center;margin-top: 100px;color: #39b54a;font-size: 10px;">
					<text style="color: gray;">授权登录/注册即表示同意</text>
					<text @click="agree('agree')">《用户协议》</text>
					<text @click="agree('conceal')">《隐私策略》</text>
					<text style="color: gray;">协议</text>

				</view>
			</view>
		</view>

		<!-- //授权弹框 -->
		<view class="auth_wrap" :class="isAuth?'show':''">
			<view class="mask"></view>
			<view class="auth_content">
				<view class="auth_top">
					<view class="ptitle">获取您的昵称、头像、手机号</view>
					<view class="txt">获取用户头像、昵称、手机号信息，主要用于完善个人资料，向用户提供更好使用体验</view>
					<view class="close" @tap="closePopup">
						<image src="../../static/close_x.png" mode=""></image>
					</view>
				</view>
				<view class="auth_ul">
					<view class="auth_li">
						<view class="tit">头像</view>
						<view class="rit" >
							<button class="avatar-wrapper" style="display: flex;align-items: center;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<text class="weui-input" style="color: gray;font-size: 28rpx;" v-if="!avatarUrl">点击上传头像</text> 
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</view>
					</view>
					<view class="auth_li">
						<view class="tit">昵称</view>
						<view class="rit">
							<input type="nickname" class="weui-input" placeholder="请输入昵称" @blur="onNickname" />
						</view>
					</view>



				</view>
				<view class="confirm_btn" @tap.stop="WxgetUserProfile">保存</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		pathToBase64
	} from '@/common/image.js' //引入图片转base64js
	export default {
		data() {
			return {
				isAuth: false, //控制授权弹框显示与隐藏
				avatarUrl: '', //头像
				nickname: '', //昵称
				isFrist: '', //判断是否是第一次授权
				tel: '',
				showinfo: false,
				info: '',
				site: [],
				checked: true
			};
		},
		onShow() {
			console.log('onshow',this.isLogin,this.userInfo.id)
				if (this.isLogin && this.userInfo.id) {
					this.$u.route({
						type: 'reLaunch',
						url: 'pages/index/index'
					})
				}
		},
		methods: {
			agree: function(type) {

				this.info = this.site[type]
				this.showinfo = true
			},
			// 获取手机号 
			async getPhoneNumber(e) {
				// console.log(e)
				if (!e.detail.iv) {					
					uni.showToast({
						title: '请授权登录',
						duration: 2000,
						icon:'none'
					});
					
					
					return;
				}
				let code = await this.loginwx();

				// console.log(code);return;
				let param = {
					code: code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				};

				let res = await this.$u.api.get('index/getphone',param);
				console.log('res', res);
				if (res.msg == 'phone') {
					this.tel = res.data.phoneNumber
					this.isAuth = true;
				} else if (res.msg == 'user') {

					uni.showLoading({
						title: '登录中...'
					});
					this.$u.vuex('isLogin', true);
					this.$u.vuex('userInfo', res.data);
					uni.hideLoading();
					this.$u.route({
						type: 'reLaunch',
						url: 'pages/index/index'
					})
				} else {
					this.$refs.uToast.show({
						title: '提交失败，请重试'
					})
				}

			},
			authLogin() {
				//首次授权，出现授权弹框，以后退出后再登录则直接登录上去，不再出现授权弹框
				if (this.isFrist == 1) {
					this.isAuth = true;
				} else {
					this.isAuth = false;
					this.WxgetUserProfile();
				}
			},
			//关闭授权弹框
			closePopup() {
				this.isAuth = false;
			},
			//监听昵称变化
			onNickname(e) {
				console.log(e)
				this.nickname = e.detail.value;

			},

			//获取头像变化的值
			onChooseAvatar(e) {
				let _this = this;
				//将微信返的临时图片转为base64格式图
				pathToBase64(e.detail.avatarUrl).then(base64 => {
					console.log(base64)
					this.avatarUrl = base64;
				}).catch(error => {
					console.error(error)
				})
			},
			//微信登录接口
			async WxgetUserProfile() {
				let _this = this;
					
				if (!this.avatarUrl) {
				
					uni.showToast({
						title: '请上传头像',
						duration: 2000,
						icon:'none'
					});
					
					return
				}
				if (!this.nickname) {
					
					uni.showToast({
						title: '请输入昵称',
						duration: 2000,
						icon:'none'
					});
				
					return
				}

				uni.showLoading({
					title: '登录中...'
				});

				let code = await this.loginwx();

				var param = {
					avatar: this.avatarUrl,
					nickname: this.nickname,
					code: code,
					tel: this.tel,
					// parentid: this.parentid
				};
				var res = await this.$u.api.get('index/miniapplogin',param);
				if (res.code == 1) {
					this.$u.vuex('userInfo', res.data);
					this.$u.vuex('isLogin', true);
					uni.hideLoading();
					this.$u.route({
						type: 'reLaunch',
						url: 'pages/index/index'
					})
				} else {
					this.$u.func.showToast({
						title: '提交失败，请重试',
						success: () => {

						}
					})
				}

			},
			loginwx() {
				return new Promise(function(reslove, reject) {
					wx.login({
						success(res) {
							wx.setStorageSync("loginCode", res.code);
							reslove(res.code);
						},
					});
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	page,
	body,
	.page {
		min-height: 100vh;
		background: #fff;
	}

	//授权弹框 start
	.auth_wrap {
		position: fixed;
		width: 100%;
		bottom: -120%;
		transition: all 0.35s linear;

		&.show {
			bottom: 0;
			transition: all 0.35s linear;

			.mask {
				display: block;
			}
		}

		.mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			background: rgba(0, 0, 0, 0.5);
			z-index: 98;
			top: 0;
			display: none;
		}

		.auth_content {
			padding: 32rpx 32rpx 72rpx 32rpx;
			position: relative;
			z-index: 99;
			background: #fff;
			border-radius: 16rpx 16rpx 0 0;

			.auth_top {
				position: relative;

				.ptitle {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 24rpx;
				}

				.txt {
					font-size: 26rpx;
					color: #999;
				}

				.close {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.auth_ul {
				margin-top: 16rpx;

				.auth_li {
					display: flex;
					align-items: center;
					border-top: solid 1px #f5f5f5;
					padding: 24rpx 0;

					&:last-child {
						border-bottom: solid 1px #f5f5f5;
					}

					.tit {
						width: 140rpx;
						font-size: 30rpx;
					}

					.rit {
						width: calc(100% - 140rpx);

						input {
							font-size: 28rpx;
							height: 72rpx;
							width: 100%;
						}

						image {
							width: 54rpx;
							height: 54rpx;
							border-radius: 50%;
						}

						button {
							width: 100%;
							height: 72rpx;
							background: #fff;
							text-align: left;
							padding: 0;

							&:after {
								border: solid 1px #fff;
							}

							// opacity: 0;
						}
					}
				}
			}

			.confirm_btn {
				width: 700rpx;
				margin: 46rpx auto 0 auto;
				background: #39b54a;
				color: #fff;
				border-radius: 8rpx;
				height: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
			}
		}
	}

	//授权弹框 end

	.header {
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.bottom {
		background: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #39b54a;
		width: calc(100% - 64rpx);
		margin: 0 32rpx;
		border: solid 1px #39b54a;
		border-radius: 40rpx;
		width: 550rpx;

		image {
			width: 54rpx;
			height: 54rpx;
			margin-right: 16rpx;
		}
	}

	.bottom_gray {
		background: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c5c5c5;
		width: calc(100% - 64rpx);
		margin: 0 32rpx;
		border: solid 1px #c5c5c5;
		border-radius: 40rpx;

		image {
			width: 54rpx;
			height: 54rpx;
			margin-right: 16rpx;
		}
	}
</style>
